import { useEffect, useRef, useState } from 'react'
import { sumRankYear } from '../../../api/active'
// import { useNavigate } from 'react-router-dom';
import { InfiniteScroll, Modal, Toast } from 'antd-mobile'
import { GetUserInfo } from '../../../api/mine'
import './index.less'
import { useCountDown } from 'ahooks'
import noAvr from '../../../images/rank_year/no_avatar.png'
// ,'d' 明厅
const menu = ['a', 'b', 'c']
export default function RankYearTotal() {
  const [activeType, setActiveType] = useState('a') //
  const [infoType, setInfoType] = useState('rule') // rule | reward
  const [userType, setUserType] = useState('money') // money | popular

  const [members, setMembers] = useState([])
  const [topMembers, setTopMembers] = useState([])
  const [selfData, setSelfData] = useState({ rank: 0, score: 0 })
  const [useInfo, setUseInfo] = useState()

  const [_, formattedRes] = useCountDown({
    targetDate: `2024-01-20 23:59:59`
  })
  const { days, hours, minutes, seconds } = formattedRes

  function padArrayToTen(arr) {
    while (arr.length < 10) {
      arr.push({
        nickname: '待上榜',
        score: '****'
      })
    }
    return arr
  }

  useEffect(() => {
    setTopMembers([])
    setMembers([])
    Toast.show({ icon: 'loading' })
    sumRankYear({
      type: activeType === 'a' ? '1' : '2'
    })
      .then((res) => {
        console.log(res)
        // setMembers(res.data.members)
        const arr = padArrayToTen(res.data.members || [])
        const topArr = arr.splice(0, 3)
        setTopMembers([topArr[1], topArr[0], topArr[2]])
        setMembers(arr)
        setSelfData({
          ...selfData,
          ...res.data.self
        })
      })
      .catch(() => {
        const arr = padArrayToTen([])
        const topArr = arr.splice(0, 3)
        setTopMembers([topArr[1], topArr[0], topArr[2]])
        setMembers(arr)
      })
      .finally(() => {
        Toast.clear()
      })
  }, [activeType])

  useEffect(() => {
    GetUserInfo().then((res) => {
      // console.log(res.data);
      setUseInfo({
        ...res.data
      })
    })
  }, [])

  return (
    <div className="rank_year_wrap">
      <div className="menu_content">
        {menu.map((item) => (
          <div
            className={`item ${activeType}`}
            style={{
              background: `url(${require(`../../../images/rank_year/${activeType === item ? 'active' : 'un'}_${item}.png`)}) no-repeat`
              // backgroundSize: 'cover'
            }}
            onClick={() => setActiveType(item)}
          ></div>
        ))}
        {/* <div className="item b" onClick={() => setActiveType('b')}></div>
                <div className="item c" onClick={() => setActiveType('c')}></div> */}
      </div>
      <div className="content">
        {/* 标题 */}
        <div
          className="title"
          style={{
            background: `url(${require(`../../../images/rank_year/title_${activeType}.png`)}) no-repeat`
            // backgroundSize: 'cover'
          }}
        ></div>
        {/* 倒计时 */}
        {activeType !== 'c' ? (
          <div className="time_data">
            当前年度盛典倒计时 <span>{days}</span> 天 <span>{hours}</span> 时 <span>{minutes} </span> 分 <span>{seconds}</span> 秒
          </div>
        ) : null}
        {/* 排行榜 */}
        {activeType !== 'c' ? (
          <div>
            <div className="top_list">
              {topMembers.map((item, idx) => (
                <div className={`top_${!idx ? 2 : idx === 1 ? 1 : 3}`}>
                  <div className="avatar">
                    <img src={item?.headimgurl} alt="" />
                  </div>
                  <div className="info">
                    <div className="nickname ellipsis1">{item?.nickname}</div>
                    <div className="num">{item?.score ? `${activeType === 'a' ? '豪气值' : '人气值'}：${item?.score}` : ''}</div>
                  </div>
                </div>
              ))}
              {/* {
                                    !topMembers[2] && topMembers.length === 3 ? (
                                        <div className="top_3">
                                            <div className="avatar">
                                                <img src="" alt="" />
                                            </div>
                                        </div>
                                    ) : null
                                } */}
            </div>
            <div className="rank_list">
              {members.map((item, idx) => (
                <div className="item">
                  <div className="number">{item?.rank ? item?.rank : idx + 4}</div>
                  <div className="avatar">
                    <img src={item?.headimgurl || noAvr} alt="" />
                  </div>
                  <div className="nickname ellipsis1">{item.nickname}</div>
                  {/* <div className="user_info">
                                            </div> */}
                  <div className="num">
                    {activeType === 'a' ? '豪气值' : '人气值'}：{item?.score}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="rule_content">
            <div className="rule_menu">
              <div
                className="i rule"
                onClick={() => setInfoType('rule')}
                style={{
                  background: `url(${require(`../../../images/rank_year/${infoType === 'rule' ? 'active' : 'un'}_rule.png`)}) no-repeat`
                }}
              ></div>
              <div
                className="i reward"
                style={{
                  background: `url(${require(`../../../images/rank_year/${infoType === 'reward' ? 'active' : 'un'}_reward.png`)}) no-repeat`
                }}
                onClick={() => setInfoType('reward')}
              ></div>
            </div>
            <div className="rule_sub_menu">
              <div
                className="sub_i money"
                onClick={() => setUserType('money')}
                style={{
                  background: `url(${require(`../../../images/rank_year/${userType === 'money' ? 'active' : 'un'}_money.png`)}) no-repeat`
                }}
              ></div>
              <div
                className="sub_i popular"
                style={{
                  background: `url(${require(`../../../images/rank_year/${userType === 'popular' ? 'active' : 'un'}_popular.png`)}) no-repeat`
                }}
                onClick={() => setUserType('popular')}
              ></div>
            </div>
            <div className="rule_detail">
              <p>活动时间：2024年1月15日~2024年1月20日</p>
              <p>活动说明：</p>
              <p>1、 活动面对用户：{userType === 'money' ? '全平台用户' : '已加入公会的主播身份用户'}</p>
              <p>
                2、 活动规则：本活动按照{userType === 'money' ? '用户' : '主播'}个人获得的{userType === 'money' ? '豪气值' : '人气值'}
                进行排名，{userType === 'money' ? '用户对主播赠送礼物将会增加用户个人的豪气值' : '收到的所有礼物均增加自己的人气值'}。
              </p>
              <p>3、{userType === 'money' ? '豪气值' : '人气值'}计算规则：</p>
              <div className="data">
                <div className="t">
                  <div className="tit">名称</div>
                  <div className="tit">礼物价值</div>
                  <div className="tit">增加{userType === 'money' ? '豪气值' : '人气值'}</div>
                </div>
                <div className="i">
                  <div className="tit">普通礼物</div>
                  <div className="tit">1{window.baseConfig.coin_name}</div>
                  <div className="tit">1{userType === 'money' ? '豪气值' : '人气值'}</div>
                </div>
                <div className="i">
                  <div className="tit">活动限定</div>
                  <div className="tit">1{window.baseConfig.coin_name}</div>
                  <div className="tit">3{userType === 'money' ? '豪气值' : '人气值'}</div>
                </div>
              </div>
              <p>
                4、当{userType === 'money' ? '豪气值' : '人气值'}相同时，先达到该{userType === 'money' ? '豪气值' : '人气值'}
                的主播排名靠前。
              </p>
              <p>
                5、活动奖励：本次活动榜单上仅展示{userType === 'money' ? '豪气值' : '人气值'}排名前10名的
                {userType === 'money' ? '用户' : '主播'}，排名前10的{userType === 'money' ? '用户' : '主播'}
                在活动结束后均会获得价值不等的活动奖励，详情见活动奖励表。
              </p>
              <p>
                6、本活动旨在提升聊天室娱乐的互动性，本互动功能中所获得道具均不可进行撤销、退款或退换，不可兑换成
                {window.baseConfig.coin_name}、现金、不可再次交易; 您承诺不使用本功能进行任何违反法律法规及本平台规则、规范的活动或行为。
              </p>
              <p>
                {' '}
                7、利用漏洞或者是其他非法途径参与本活动，官方有权取消其活动参与资格。{window.baseConfig.package_name}
                有权清除活动中的非法数据。
              </p>
              <p>8、活动如有任何疑问请联系{window.baseConfig.package_name}客服。</p>
              <p>
                9、活动获得的所有虚拟道具及权益均不可进行转让、交易或变现，{window.baseConfig.package_name}官方有权对任何违规行为进行处理。
              </p>
              {userType === 'popular' ? (
                <p>
                  10、注意事项：本次活动房间大头不参与榜单排行，大头号收到的礼物不计入{userType === 'money' ? '豪气值' : '人气值'}
                  计算规则内。
                </p>
              ) : null}
              <p>*在此活动中，APPLE不是赞助者，也没有以任何形式参与活动</p>
            </div>
          </div>
        )}
      </div>
      {activeType !== 'c' ? (
        <div className="self_fixed">
          <div className="self_data">
            <div className="rank">{selfData.rank && selfData.rank <= 10 ? selfData.rank : '未上榜'}</div>
            <div className="avatar">
              <img src={useInfo?.headimgurl || noAvr} alt="" />
            </div>
            <div className="name ellipsis1">{useInfo?.nickname}</div>
            <div>
              {activeType === 'a' ? '豪气值' : '人气值'}：{selfData.score}
            </div>
          </div>
        </div>
      ) : null}
    </div>
  )
}
